<template>
  <div class="goods-class">
    <!-- 搜索栏 -->
    <el-card class="mb-4">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="核销类型">
          <el-select filterable v-model="searchForm.type" placeholder="请选择核销类型">
            <el-option label="全部" value="" />
            <el-option label="优惠券" :value="1" />
            <el-option label="积分订单" :value="2" />
            <el-option label="员工卡" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="核销门店" prop="shopId">
          <el-select filterable v-model="searchForm.shopId" clearable placeholder="请选择核销门店" class="w-full">
            <el-option :label="item.name" :value="item.id" v-for="item,index in merchantList" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%;margin-top:15px">
      <!-- <el-table-column prop="id" label="ID" width="90" /> -->
      <el-table-column prop="orderNo" label="订单编号" />
      <el-table-column prop="writeOffTime" label="核销日期" />
      <el-table-column prop="shopName" label="核销门店" />
      <el-table-column prop="floorName" label="楼层" />
      <!-- <el-table-column prop="shopName" label="核销门店" /> -->
      <el-table-column prop="shopAddress" label="门店地址" />
      <el-table-column prop="shopNumber" label="门牌号" />
      <el-table-column prop="writeOffType" label="核销类型">
        <template #default="{ row }">
          <el-tag v-if="row.writeOffType === 1" type="primary">优惠券</el-tag>
          <el-tag v-if="row.writeOffType === 2" type="primary">积分订单</el-tag>
          <el-tag v-if="row.writeOffType === 3" type="primary">员工卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="writeOffStatus" label="核销状态">
        <template #default="{ row }">
          <el-tag v-if="row.writeOffStatus === 0" type="danger">待核销</el-tag>
          <el-tag v-if="row.writeOffStatus === 1" type="success">已核销</el-tag>
        </template>
      </el-table-column>
  
    </el-table>
  
    <!-- 分页 -->
    <div style="text-align: right; margin-top: 16px;">
      <el-pagination :current-page="searchForm.page" :page-size="searchForm.pageSize" :total="total"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'GoodsClass',
  data() {
    return {
      // 搜索表单
      searchForm: {
        name: '',
        shopId: '',
        pageSize: 10,
        page: 1,
      },
      // 表格数据
      tableData: [],
      total: 10,
      loading: false,
      merchantList: [],
      userList: [],
      couponList: [],
    }
  },
  created() {
    this.getList()
    // this.queryUserList()
    // this.queryCouponList()
    this.getMerchantList();
  },
  methods: {
    async getMerchantList() {
      const { data } = await this.$api.shopPageList({
        page: 1,
        size: 10000,
        condition: {
          categoryId: '',
          areaId: '',
          floorId: '',
        }
      })
      console.log(data, '111111');
      this.merchantList = data.result.records
    },
    async queryCouponList() {
      const { data } = await this.$api.couponList({
        page: 1,
        size: 1000,
        condition: {
          categoryId: '',
          shelf: ''
        }
      })
      console.log(data, 'data');
      this.couponList = data.result.records
    },
    async queryUserList() {
      const { data } = await this.$api.getUserLists({
        page: 1,
        size: 1000,
        condition: {
          nickname: '',
          phone: '',
          status: '',
          type: ''
        }
      })
      this.userList = data.result.records
      console.log(data, '商户列表');
    },
    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const { data } = await this.$api.getWriteOffList({
          page: this.searchForm.page,
          size: this.searchForm.pageSize,
          condition: {
            type: this.searchForm.type,
            shopId: this.searchForm.shopId
          }
        })
        console.log(data, 'data');
        this.tableData = data.result.records
        this.total = data.result.total
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1
      this.getList()
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getList()
    },
    // 页码改变
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getList()
    },
    // 重置表单
    resetForm() {
      if (this.$refs.formRef) {
        this.$refs.formRef.resetFields()
      }
      this.form = {
        name: '',
        sort: 0
      }
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
.goods-class {
    padding: 20px;
  }
</style>